
<!doctype html>
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><html lang="en" class="no-js"> <![endif]-->
<html lang="en">
<head>
	
	<!-- Basic -->
	<title>Margo | Services</title>
	
	<!-- Define Charset -->
	<meta charset="utf-8">
	
	<!-- Responsive Metatag -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	
	<!-- Page Description and Author -->
	<meta name="description" content="Margo - Responsive HTML5 Template">
	<meta name="author" content="iThemesLab">
	
	
	<!-- Bootstrap CSS  -->
	<link rel="stylesheet" href="asset/css/bootstrap.min.css" type="text/css" media="screen">

	<!-- Font Awesome CSS -->
	<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" media="screen">
	
	<!-- Margo CSS Styles  -->
	<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
	
	<!-- Responsive CSS Styles  -->
	<link rel="stylesheet" type="text/css" href="css/responsive.css" media="screen">
	
	<!-- Color CSS Styles  -->
	<link rel="stylesheet" type="text/css" href="css/colors/red.css" title="red" media="screen" />
	<link rel="stylesheet" type="text/css" href="css/colors/jade.css" title="jade" media="screen" />
	<link rel="stylesheet" type="text/css" href="css/colors/blue.css" title="blue" media="screen" />
	<link rel="stylesheet" type="text/css" href="css/colors/beige.css" title="beige" media="screen" />
	<link rel="stylesheet" type="text/css" href="css/colors/cyan.css" title="cyan" media="screen" />
	<link rel="stylesheet" type="text/css" href="css/colors/green.css" title="green" media="screen" />
	<link rel="stylesheet" type="text/css" href="css/colors/orange.css" title="orange" media="screen" />
	<link rel="stylesheet" type="text/css" href="css/colors/peach.css" title="peach" media="screen" />
	<link rel="stylesheet" type="text/css" href="css/colors/pink.css" title="pink" media="screen" />
	<link rel="stylesheet" type="text/css" href="css/colors/purple.css" title="purple" media="screen" />
	<link rel="stylesheet" type="text/css" href="css/colors/sky-blue.css" title="sky-blue" media="screen" />
	<link rel="stylesheet" type="text/css" href="css/colors/yellow.css" title="yellow" media="screen" />
	
	
	
	<!-- Margo JS  -->
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="js/jquery.migrate.js"></script>
	<script type="text/javascript" src="js/modernizrr.js"></script>
	<script type="text/javascript" src="asset/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/jquery.fitvids.js"></script>
	<script type="text/javascript" src="js/owl.carousel.min.js"></script>
	<script type="text/javascript" src="js/nivo-lightbox.min.js"></script>
	<script type="text/javascript" src="js/jquery.isotope.min.js"></script>
	<script type="text/javascript" src="js/jquery.appear.js"></script>
	<script type="text/javascript" src="js/count-to.js"></script>
	<script type="text/javascript" src="js/jquery.textillate.js"></script>
	<script type="text/javascript" src="js/jquery.lettering.js"></script>
	<script type="text/javascript" src="js/jquery.easypiechart.min.js"></script>
	<script type="text/javascript" src="js/jquery.nicescroll.min.js"></script>
	<script type="text/javascript" src="js/jquery.parallax.js"></script>
	<script type="text/javascript" src="js/script.js"></script>
	
	<!--[if IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
	<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
	
</head>
<body>

	<!-- Container -->
	<div id="container">
		
		<!-- Start Header -->
		<div class="hidden-header"></div>
		<header class="clearfix">
			
			<!-- Start Top Bar -->
			<div class="top-bar">
				<div class="container">
					<div class="row">
						<div class="col-md-6">
							<!-- Start Contact Info -->
							<ul class="contact-details">
                                <li><a href="#"><i class="fa fa-map-marker"></i> House-54/A, London, UK</a>
                                </li>
                                <li><a href="#"><i class="fa fa-envelope-o"></i> info@yourcompany.com</a>
                                </li>
                                <li><a href="#"><i class="fa fa-phone"></i> +12 345 678 000</a>
                                </li>
                            </ul>
							<!-- End Contact Info -->
						</div>
						<div class="col-md-6">
							<!-- Start Social Links -->
							<ul class="social-list">
								<li>
									<a class="facebook itl-tooltip" data-placement="bottom" title="Facebook" href="#"><i class="fa fa-facebook"></i></a>
								</li>
								<li>
									<a class="twitter itl-tooltip" data-placement="bottom" title="Twitter" href="#"><i class="fa fa-twitter"></i></a>
								</li>
								<li>
									<a class="google itl-tooltip" data-placement="bottom" title="Google Plus" href="#"><i class="fa fa-google-plus"></i></a>
								</li>
								<li>
									<a class="dribbble itl-tooltip" data-placement="bottom" title="Dribble" href="#"><i class="fa fa-dribbble"></i></a>
								</li>
								<li>
									<a class="linkdin itl-tooltip" data-placement="bottom" title="Linkedin" href="#"><i class="fa fa-linkedin"></i></a>
								</li>
								<li>
									<a class="flickr itl-tooltip" data-placement="bottom" title="Flickr" href="#"><i class="fa fa-flickr"></i></a>
								</li>
								<li>
									<a class="tumblr itl-tooltip" data-placement="bottom" title="Tumblr" href="#"><i class="fa fa-tumblr"></i></a>
								</li>
								<li>
									<a class="instgram itl-tooltip" data-placement="bottom" title="Instagram" href="#"><i class="fa fa-instagram"></i></a>
								</li>
								<li>
									<a class="vimeo itl-tooltip" data-placement="bottom" title="vimeo" href="#"><i class="fa fa-vimeo-square"></i></a>
								</li>
								<li>
									<a class="skype itl-tooltip" data-placement="bottom" title="Skype" href="#"><i class="fa fa-skype"></i></a>
								</li>
							</ul>
							<!-- End Social Links -->
						</div>
					</div>
				</div>
			</div>
			<!-- End Top Bar -->
			
			<!-- Start Header ( Logo & Naviagtion ) -->
			<div class="navbar navbar-default navbar-top">
				<div class="container">
					<div class="navbar-header">
						<!-- Stat Toggle Nav Link For Mobiles -->
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
							<i class="fa fa-bars"></i>
						</button>
						<!-- End Toggle Nav Link For Mobiles -->
						<a class="navbar-brand" href="index.html"><img alt="" src="images/margo.png"></a>
					</div>
					<div class="navbar-collapse collapse">
						<!-- Stat Search -->
						<div class="search-side">
							<a href="#" class="show-search"><i class="fa fa-search"></i></a>
							<div class="search-form">
								<form autocomplete="off" role="search" method="get" class="searchform" action="#">
									<input type="text" value="" name="s" id="s" placeholder="Search the site...">
								</form>
							</div>
						</div>
						<!-- End Search -->
						<!-- Start Navigation List -->
						<ul class="nav navbar-nav navbar-right">
							<li>
								<a href="index.html">Home</a>
								<ul class="dropdown">
									<li><a href="index.html">Home Main Version</a></li>
									<li><a href="index-01.html">Home Version 1</a></li>
									<li><a href="index-02.html">Home Version 2</a></li>
									<li><a href="index-03.html">Home Version 3</a></li>
									<li><a href="index-04.html">Home Version 4</a></li>
									<li><a href="index-05.html">Home Version 5</a></li>
									<li><a href="index-06.html">Home Version 6</a></li>
									<li><a href="index-07.html">Home Version 7</a></li>
								</ul>
							</li>
							<li>
								<a class="active" href="about.html">Pages</a>
								<ul class="dropdown">
									<li><a href="about.html">About</a></li>
									<li><a class="active" href="services.html">Services</a></li>
									<li><a href="right-sidebar.html">Right Sidebar</a></li>
									<li><a href="left-sidebar.html">Left Sidebar</a></li>
									<li><a href="404.html">404 Page</a></li>
								</ul>
							</li>
							<li>
								<a href="#">Shortcodes</a>
								<ul class="dropdown">
									<li><a href="tabs.html">Tabs</a></li>
									<li><a href="buttons.html">Buttons</a></li>
									<li><a href="action-box.html">Action Box</a></li>
									<li><a href="testimonials.html">Testimonials</a></li>
									<li><a href="latest-posts.html">Latest Posts</a></li>
									<li><a href="latest-projects.html">Latest Projects</a></li>
									<li><a href="pricing.html">Pricing Tables</a></li>
									<li><a href="accordion-toggles.html">Accordion & Toggles</a></li>
								</ul>
							</li>
							<li>
								<a href="portfolio-3.html">Portfolio</a>
								<ul class="dropdown">
									<li><a href="portfolio-2.html">2 Columns</a></li>
									<li><a href="portfolio-3.html">3 Columns</a></li>
									<li><a href="portfolio-4.html">4 Columns</a></li>
									<li><a href="single-project.html">Single Project</a></li>
								</ul>
							</li>
							<li>
								<a href="blog.html">Blog</a>
								<ul class="dropdown">
									<li><a href="blog.html">Blog - right Sidebar</a></li>
									<li><a href="blog-left-sidebar.html">Blog - Left Sidebar</a></li>
									<li><a href="single-post.html">Blog Single Post</a></li>
								</ul>
							</li>
							<li><a href="contact.html">Contact</a></li>
						</ul>
						<!-- End Navigation List -->
					</div>
				</div>
			</div>
			<!-- End Header ( Logo & Naviagtion ) -->
			
		</header>
		<!-- End Header -->

		
		
		
		<!-- Start Page Banner -->
		<div class="page-banner" style="padding:40px 0; background: url(images/slide-02-bg.jpg) center #f9f9f9;">
			<div class="container">
				<div class="row">
					<div class="col-md-6">
						<h2>Services</h2>
						<p>We Are Professional</p>
					</div>
					<div class="col-md-6">
						<ul class="breadcrumbs">
							<li><a href="#">Home</a></li>
							<li>Services</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!-- End Page Banner -->
		
		
		

		<!-- Start Content -->
		<div id="content">
			<div class="container">
				<div class="page-content">
					
					
					<div class="row">
						
						<!-- Start Image Service Box 1 -->
						<div class="col-md-4 image-service-box">
							<img class="img-thumbnail" src="images/service-01.jpg" alt="" />
							<h4>Clean Modern Code</h4>
							<p>Sed ut perspiciatis unde omnis iste natus error voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis quasi architect.</p>
						</div>
						<!-- End Image Service Box 1 -->
						
						<!-- Start Image Service Box 2 -->
						<div class="col-md-4 image-service-box">
							<img class="img-thumbnail" src="images/service-02.jpg" alt="" />
							<h4>Great Support</h4>
							<p>Sed ut perspiciatis unde omnis iste natus error voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis quasi architect.</p>
						</div>
						<!-- End Image Service Box 2 -->
						
						<!-- Start Image Service Box 3 -->
						<div class="col-md-4 image-service-box">
							<img class="img-thumbnail" src="images/service-03.jpg" alt="" />
							<h4>High Quality Theme</h4>
							<p>Sed ut perspiciatis unde omnis iste natus error voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis quasi architect.</p>
						</div>
						<!-- End Image Service Box 3 -->
						
					</div>
					
					<!-- Divider -->
					<div class="hr1" style="margin-bottom:45px;"></div>
					
					<div class="row">
						
						<div class="col-md-4">
							
							<!-- Classic Heading -->
							<h4 class="classic-title"><span>We Aare Awesome</span></h4>
							
							<!-- Accordion -->
							<div class="panel-group" id="accordion">
								
								<!-- Start Accordion 1 -->
								<div class="panel panel-default">
									<div class="panel-heading">
										<h4 class="panel-title">
											<a data-toggle="collapse" data-parent="#accordion" href="#collapse-one">
												<i class="fa fa-angle-up control-icon"></i>
												<i class="fa fa-desktop"></i> Fully Responsive Theme
											</a>
										</h4>
									</div>
									<div id="collapse-one" class="panel-collapse collapse in">
										<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ea commodo consequat. Duis aute irure dolor in reprehe in voluptate velit esse cillum dolore fugiat nulla pariatur.</div>
									</div>
								</div>
								<!-- End Accordion 1 -->
								
								<!-- Start Accordion 2 -->
								<div class="panel panel-default">
									<div class="panel-heading">
										<h4 class="panel-title">
											<a data-toggle="collapse" data-parent="#accordion" href="#collapse-tow" class="collapsed">
												<i class="fa fa-angle-up control-icon"></i>
												<i class="fa fa-gift"></i> Touchable Slider
											</a>
										</h4>
									</div>
									<div id="collapse-tow" class="panel-collapse collapse">
										<div class="panel-body">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. The point of using Lorem Ipsum is that it has a <strong>more-or-less</strong> normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore...</div>
									</div>
								</div>
								<!-- End Accordion 2 -->
								
								<!-- Start Accordion 3 -->
								<div class="panel panel-default">
									<div class="panel-heading">
										<h4 class="panel-title">
											<a data-toggle="collapse" data-parent="#accordion" href="#collapse-three" class="collapsed">
												<i class="fa fa-angle-up control-icon"></i>
												<i class="fa fa-tint"></i> Retina Ready
											</a>
										</h4>
									</div>
									<div id="collapse-three" class="panel-collapse collapse">
										<div class="panel-body"><strong>Duis</strong> aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore...</div>
									</div>
								</div>
								<!-- End Accordion 3 -->
								
							</div>
							<!-- End Accordion -->
							
						</div>
						
						<div class="col-md-8">
							
							<!-- Classic Heading -->
							<h4 class="classic-title"><span>Our Features</span></h4>
							
							<div class="row">
								
								<!-- Start Service Icon 1 -->
								<div class="col-md-6 service-box service-icon-left-more">
									<div class="service-icon">
										<i class="fa fa-magic icon-medium"></i>
									</div>
									<div class="service-content">
										<h4>Photoshop</h4>
										<p>It is a long <strong class="accent-color">established</strong> fact that a reader will be distracted by the readable content of a page.</p>
									</div>
								</div>
								<!-- End Service Icon 1 -->
								
								<!-- Start Service Icon 2 -->
								<div class="col-md-6 service-box service-icon-left-more">
									<div class="service-icon">
										<i class="fa fa-users icon-medium"></i>
									</div>
									<div class="service-content">
										<h4>Web Marketing</h4>
										<p>It is a long <strong class="accent-color">established</strong> fact that a reader will be distracted by the readable content of a page.</p>
									</div>
								</div>
								<!-- End Service Icon 2 -->
								
								<!-- Start Service Icon 3 -->
								<div class="col-md-6 service-box service-icon-left-more">
									<div class="service-icon">
										<i class="fa fa-globe icon-medium"></i>
									</div>
									<div class="service-content">
										<h4>Web Hosting</h4>
										<p>It is a long <strong class="accent-color">established</strong> fact that a reader will be distracted by the readable content of a page.</p>
									</div>
								</div>
								<!-- End Service Icon 3 -->
								
								<!-- Start Service Icon 4 -->
								<div class="col-md-6 service-box service-icon-left-more">
									<div class="service-icon">
										<i class="fa fa-picture-o icon-medium"></i>
									</div>
									<div class="service-content">
										<h4>Phtography</h4>
										<p>It is a long <strong class="accent-color">established</strong> fact that a reader will be distracted by the readable content of a page.</p>
									</div>
								</div>
								<!-- End Service Icon 4 -->
								
								<!-- Start Service Icon 5 -->
								<div class="col-md-6 service-box service-icon-left-more">
									<div class="service-icon">
										<i class="fa fa-leaf icon-medium"></i>
									</div>
									<div class="service-content">
										<h4>Product Design</h4>
										<p>It is a long <strong class="accent-color">established</strong> fact that a reader will be distracted by the readable content of a page.</p>
									</div>
								</div>
								<!-- End Service Icon 5 -->
								
								<!-- Start Service Icon 6 -->
								<div class="col-md-6 service-box service-icon-left-more">
									<div class="service-icon">
										<i class="fa fa-umbrella icon-medium"></i>
									</div>
									<div class="service-content">
										<h4>Supporting</h4>
										<p>It is a long <strong class="accent-color">established</strong> fact that a reader will be distracted by the readable content of a page.</p>
									</div>
								</div>
								<!-- End Service Icon 6 -->
								
							</div>
						</div>
						
					</div>
					
					<!-- Divider -->
					<div class="hr1" style="margin-bottom:25px;"></div>
					
					<div class="row">
						
						<div class="col-md-8">
							
							<!-- Start Clients Carousel -->
							<div class="our-clients">
								
								<!-- Classic Heading -->
								<h4 class="classic-title"><span>Our Clients</span></h4>
								
								<div class="clients-carousel custom-carousel touch-carousel" data-appeared-items="4">
									
									<!-- Client 1 -->
									<div class="client-item item">
										<a href="#"><img src="images/c1.png" alt="" /></a>
									</div>
									
									<!-- Client 2 -->
									<div class="client-item item">
										<a href="#"><img src="images/c2.png" alt="" /></a>
									</div>
									
									<!-- Client 3 -->
									<div class="client-item item">
										<a href="#"><img src="images/c3.png" alt="" /></a>
									</div>
									
									<!-- Client 4 -->
									<div class="client-item item">
										<a href="#"><img src="images/c4.png" alt="" /></a>
									</div>
									
									<!-- Client 5 -->
									<div class="client-item item">
										<a href="#"><img src="images/c5.png" alt="" /></a>
									</div>
									
									<!-- Client 6 -->
									<div class="client-item item">
										<a href="#"><img src="images/c6.png" alt="" /></a>
									</div>
									
									<!-- Client 7 -->
									<div class="client-item item">
										<a href="#"><img src="images/c7.png" alt="" /></a>
									</div>
									
									<!-- Client 8 -->
									<div class="client-item item">
										<a href="#"><img src="images/c8.png" alt="" /></a>
									</div>
									
								</div>
							</div>
							<!-- End Clients Carousel -->
							
						</div>
						
						<div class="col-md-4">
							
							<!-- Classic Heading -->
							<h4 class="classic-title"><span>Client Testimonials</span></h4>
							
							<!-- Start Testimonials Carousel -->
							<div class="custom-carousel show-one-slide touch-carousel" data-appeared-items="1">
								<!-- Testimonial 1 -->
								<div class="classic-testimonials item">
									<div class="testimonial-content">
										<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim laborum.</p>
									</div>
									<div class="testimonial-author"><span>John Doe</span> - Customer</div>
								</div>
								<!-- Testimonial 2 -->
								<div class="classic-testimonials item">
									<div class="testimonial-content">
										<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim laborum.</p>
									</div>
									<div class="testimonial-author"><span>John Doe</span> - Customer</div>
								</div>
								<!-- Testimonial 3 -->
								<div class="classic-testimonials item">
									<div class="testimonial-content">
										<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim laborum.</p>
									</div>
									<div class="testimonial-author"><span>John Doe</span> - Customer</div>
								</div>
							</div>
							<!-- End Testimonials Carousel -->
							
						</div>
						
					</div>
					

				</div>
			</div>
		</div>
		<!-- End Content -->
		
		
		
		
		<!-- Start Footer -->
		<footer>
			<div class="container">
				<div class="row footer-widgets">
					
					<!-- Start Subscribe & Social Links Widget -->
                    <div class="col-md-3">
                        <div class="footer-widget mail-subscribe-widget">
                            <h4>Get in touch<span class="head-line"></span></h4>
                            <p>Join our mailing list to stay up to date and get notices about our new releases!</p>
                            <form class="subscribe">
                                <input type="text" placeholder="mail@example.com">
                                <input type="submit" class="main-button" value="Send">
                            </form>
                        </div>
                        <div class="footer-widget social-widget">
                            <h4>Follow Us<span class="head-line"></span></h4>
                            <ul class="social-icons">
                                <li>
                                    <a class="facebook" href="#"><i class="fa fa-facebook"></i></a>
                                </li>
                                <li>
                                    <a class="twitter" href="#"><i class="fa fa-twitter"></i></a>
                                </li>
                                <li>
                                    <a class="google" href="#"><i class="fa fa-google-plus"></i></a>
                                </li>
                                <li>
                                    <a class="dribbble" href="#"><i class="fa fa-dribbble"></i></a>
                                </li>
                                <li>
                                    <a class="linkdin" href="#"><i class="fa fa-linkedin"></i></a>
                                </li>
                                <li>
                                    <a class="flickr" href="#"><i class="fa fa-flickr"></i></a>
                                </li>
                                <li>
                                    <a class="tumblr" href="#"><i class="fa fa-tumblr"></i></a>
                                </li>
                                <li>
                                    <a class="instgram" href="#"><i class="fa fa-instagram"></i></a>
                                </li>
                                <li>
                                    <a class="vimeo" href="#"><i class="fa fa-vimeo-square"></i></a>
                                </li>
                                <li>
                                    <a class="skype" href="#"><i class="fa fa-skype"></i></a>
                                </li>
                            </ul>
                        </div>
                    </div><!-- .col-md-3 -->
                    <!-- End Subscribe & Social Links Widget -->
                    
                    
                    <!-- Start Twitter Widget -->
                    <div class="col-md-3">
                        <div class="footer-widget twitter-widget">
                            <h4>Twitter Feed<span class="head-line"></span></h4>
                            <ul>
                                <li>
                                    <p><a href="#">@ithemeslab </a> Lorem ipsum dolor et, consectetur adipiscing eli.</p>
                                    <span>28 February 2014</span>
                                </li>
                                <li>
                                    <p><a href="#">@ithemeslab </a> Lorem ipsum dolor et, consectetur adipiscing eli.An Fusce eleifend aliquet nis application.</p>
                                    <span>26 February 2014</span>
                                </li>
                                <li>
                                    <p><a href="#">@ithemeslab </a> Lorem ipsum dolor et, consectetur adipiscing eli.</p>
                                    <span>28 February 2014</span>
                                </li>
                            </ul>
                        </div>
                    </div><!-- .col-md-3 -->
                    <!-- End Twitter Widget -->


                    <!-- Start Flickr Widget -->
                    <div class="col-md-3">
                        <div class="footer-widget flickr-widget">
                            <h4>Flicker Feed<span class="head-line"></span></h4>
                            <ul class="flickr-list">
                                <li>
                                    <a href="images/flickr-01.jpg" class="lightbox">
                                        <img alt="" src="images/flickr-01.jpg">
                                    </a>
                                </li>
                                <li>
                                    <a href="images/flickr-02.jpg" class="lightbox">
                                        <img alt="" src="images/flickr-02.jpg">
                                    </a>
                                </li>
                                <li>
                                    <a href="images/flickr-03.jpg" class="lightbox">
                                        <img alt="" src="images/flickr-03.jpg">
                                    </a>
                                </li>
                                <li>
                                    <a href="images/flickr-04.jpg" class="lightbox">
                                        <img alt="" src="images/flickr-04.jpg">
                                    </a>
                                </li>
                                <li>
                                    <a href="images/flickr-05.jpg" class="lightbox">
                                        <img alt="" src="images/flickr-05.jpg">
                                    </a>
                                </li>
                                <li>
                                    <a href="images/flickr-06.jpg" class="lightbox">
                                        <img alt="" src="images/flickr-06.jpg">
                                    </a>
                                </li>
                                <li>
                                    <a href="images/flickr-07.jpg" class="lightbox">
                                        <img alt="" src="images/flickr-07.jpg">
                                    </a>
                                </li>
                                <li>
                                    <a href="images/flickr-08.jpg" class="lightbox">
                                        <img alt="" src="images/flickr-08.jpg">
                                    </a>
                                </li>
                                <li>
                                    <a href="images/flickr-09.jpg" class="lightbox">
                                        <img alt="" src="images/flickr-09.jpg">
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div><!-- .col-md-3 -->
                    <!-- End Flickr Widget -->

                    
                    <!-- Start Contact Widget -->
                    <div class="col-md-3">
                        <div class="footer-widget contact-widget">
                            <h4><img src="images/footer-margo.png" class="img-responsive" alt="Footer Logo" /></h4>
                            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident</p>
                            <ul>
                                <li><span>Phone Number:</span> +01 234 567 890</li>
                                <li><span>Email:</span> company@company.com</li>
                                <li><span>Website:</span> www.yourdomain.com</li>
                            </ul>
                        </div>
                    </div><!-- .col-md-3 -->
                    <!-- End Contact Widget -->

				
				</div><!-- .row -->
				
				<!-- Start Copyright -->
				<div class="copyright-section">
					<div class="row">
						<div class="col-md-6">
							<p>Copyright 2013 Margo -  All Rights Reserved</p>
						</div>
						<div class="col-md-6">
							<ul class="footer-nav">
								<li><a href="#">Sitemap</a></li>
								<li><a href="#">Privacy Policy</a></li>
								<li><a href="#">Contact</a></li>
							</ul>
						</div>						
					</div>
				</div>
				<!-- End Copyright -->
				
			</div>
		</footer>
		<!-- End Footer -->
		
	</div>
	<!-- End Container -->
	
	<!-- Go To Top Link -->
	<a href="#" class="back-to-top"><i class="fa fa-angle-up"></i></a>
	
	<div id="loader">
		<div class="spinner">
			<div class="dot1"></div>
			<div class="dot2"></div>
		</div>
	</div>
	
	
	
</body>
</html>